<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-25 10:42:17
 * @LastEditTime: 2019-09-29 09:02:44
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div>

        <!-- 用户登录 -->
        <div class="mark" v-if="page == 1">
            <img src="/static/images/tm_logo.png" alt="">
            <!-- <p>同洗洗车,同洗洗车</p> -->
            <div class="userInfo">
                <p>请确认一下授权信息</p>
                <p>获取你的信息 (头像，昵称等)</p>
                <button open-type="getUserInfo" @getuserinfo="getInfo" type="primary">确认</button>
            </div>
        </div>

        <div v-if="page == 2"  class="mesChange">
            <img src="/static/images/tm_logo.png" alt="">
            <span>请选择手机方式注册</span>
            <div class="userInfo">
                <button  open-type="getPhoneNumber" @getphonenumber="getPhone" type="primary" style="margin-bottom:40rpx;">授权当前手机</button>
                <button @click="otherPhone">授权其它手机</button>
            </div>
        </div>
        

        <!-- 登录注册 -->
        <div v-if="page == 3">
            <div class="login" v-show="!verification" >
                <img src="/static/images/logo.png" alt="">
                <h1>同洗洗车</h1>
                <input type="number" name="" id="" 
                placeholder="请输入你的手机号" 
                v-model="tel"
                @input="telChange($event)">
                <button v-bind:class="[telOk ? 'telOk':'telError']"  @click='nextStep'>下一步</button>
            </div>

            <!-- 短信验证 -->
            <div class="verification" v-show="verification">
                <h1>验证码已发送至</h1>
                <p>
                    <span>{{tel}}</span>
                    <span @click='sendMessage'>{{countDown ? '('+countDown+'秒)' : '重新发送'}}</span>
                </p>
                <input type="number" placeholder="请输入验证码" @input="verChange($event)" v-model="ver">
                <button @click='login' :class="[verOk ? 'verOk' : 'verError']">注册/登录</button>
            </div>
        </div>
    </div>
</template>


<script>
let apis = require('../../utils/api').default
// console.log(apis)
export default {
    data(){
        return {
            tel:'',  //电话号码
            verification:false, //号码和验证码显示和隐藏
            telOk:false, //电话号号码OK
            ver:'', //短信内容
            verOk:false,  //短信号码Ok
            countDown:0,  //短信倒计时时间
            page:1,
            code:'',
            openId:''
        }
    },  
    methods:{
        otherPhone(){
            this.$set(this,'page',3 )
        },
        // 点击用户信息授权按钮   没有注册跳转带短信注册页面
        getInfo(e){
            const _this = this
            let userInfo = e.mp.detail.userInfo
            let nickName = userInfo.nickName
            let custImg = userInfo.avatarUrl
            let token = userInfo.token
            wx.setStorageSync('nickName',nickName)
            wx.setStorageSync('custImg',custImg)
            wx.setStorageSync('info',userInfo)
            // wx.setStorageSync('token',token)
            wx.login({
                success(res){   
                    let code = res.code
                    apis._getUser('post',{
                        openId:'',
                        code : code,
                        appType:6
                    },function(res){
                        console.log(res)
                        var res = res.data
                        // wx.setStorageSync('openId',res.data.openId)
                        _this.$set(_this,'openId',res.data.openId)
                        wx.setStorageSync('custId',res.data.custId)
                        // console.log(res)
                        // 系统错误
                        if(res.ret==2){
                            wx.showToast({
                                title: res.msg,
                                icon: 'none',
                                duration: 2000
                            })
                            return false
                        }
                        // 无注册
                        if(res.data.status == 0){
                            _this.$set(_this,'page',2)
                        }else{
                            // 已注册用户
                            console.log('已注册用户')
                            wx.showToast({
                                title:'已登录',
                                icon:'success',
                                duration:2000
                            })
                            wx.setStorageSync('openId',res.data.openId)
                            wx.setStorageSync('user',res.data)
                            wx.setStorageSync('token',res.data.token)
                            wx.navigateBack({
                                delta: 1
                            })
                        }
                    })   
                }
            })     
        },
        // 获取用户手机号码
        getPhone(e){
            const _this =this
            // console.log(e)
            // let openId = wx.getStorageSync('openId')
            let openId = this.openId
            wx.login({
                success(res){
                    let code = res.code
                    let encryptedData = e.mp.detail.encryptedData
                    let iv = e.mp.detail.iv
                    apis.register2('post',{
                        code : code,
                        openId : openId,
                        encryptedData: encryptedData,
                        iv:iv,
                        nickName:wx.getStorageSync('nickName'),
                        custImg:wx.getStorageSync('custImg')
                    },function(res){
                        if(res.ret ==2){
                            wx.showToast({
                                title:'注册成功',
                                icon:'none',
                                duration:2000
                            })
                            return false
                        }
                        wx.setStorageSync('token',res.data.data.token)
                        console.log(res.data.data.token)
                        wx.setStorageSync('custId',res.data.data.custId)
                        wx.showToast({
                            title:'注册成功',
                            icon:'success',
                            duration:2000
                        })
                        // console.log('注册成功'+res)
                        _this.updateCust()
                        wx.setStorageSync('info',res.data.data)
                        wx.redirectTo({
                            url: '../index/main'
                        })
                    })
                }
            })
        },
        // 修改用户信息
        updateCust(){
            // console.log('大哥')
            const _this = this
            apis.updateCust('post',{
                openId:_this.openId,
                custId:wx.getStorageSync('custId'),
                custNname:wx.getStorageSync('nickName'),
                custImg:wx.getStorageSync('custImg'),
                appType:6
            },function(res){
                // console.log('修改用户信息成功'+res)
                wx.showToast({
                    title: '注册成功',
                    icon: 'success',
                    duration: 2000
                })
                wx.navigateBack({
                    delta: 1
                })
                wx.setStorageSync('openId',_this.openId)
            })
        },
        // 输入手机号码
        telChange(event){
            let tel = this.tel
            // console.log(tel)
            if(tel.length == 11){
                this.$set(this,'telOk',true)
            }else{
                this.$set(this,'telOk',false)
            }
        },

        // 点击下一步
        nextStep(){
            let tel = this.tel
            let openId = this.openId
            if(this.telOk){
                // console.log('短信接口')
                this.$set(this,'verification',true)
                this.$set(this,'countDown',60)
                this.$options.methods.countDown(this)
                apis.sendSms('post',{
                    phone:tel,
                    openId : openId,
                    type: 6
                },function(res){
                    if(res.ret == 2) return false
                    wx.showToast({
                        title: '短信已发送',
                        icon: 'success',
                        duration: 2000
                    })
                })

            }else{
                return false
            }
        },
        
        // 输入验证码
        verChange(event){
            let ver = this.ver
            if(/^\d{4}$/.test(ver)){
                this.$set(this,'verOk',true)
            }else{
                this.$set(this,'verOk',false)
            }
        },
        

        // 点击验证
        login(){
            let tel = this.tel
            let ver = this.ver
            let openId = this.openId
            let _this = this
            if(this.verOk){
                // console.log('短信验证接口')
                apis.register('post',{
                    phone:tel,
                    openId : openId,
                    smsCode : ver
                },function(res){
                    // console.log(res)
                    wx.setStorageSync('token',res.data.data.token)
                    console.log(res.data.data.token)
                    wx.setStorageSync('custId',res.data.data.custId)
                    wx.setStorageSync('info',res.data.data)
                    _this.updateCust()
                })
            }else{
                return false
            }
        },


        // 验证码倒计时
        countDown(_this){
            // console.log('倒计时中')
            let timeCountDown = setInterval(function(){
                if(_this.countDown > 0){
                    _this.$set(_this,'countDown',--_this.countDown)
                }else{
                    _this.$set(_this,'countDown',0)
                    console.log(timeCountDown)
                    clearInterval(timeCountDown)
                }
            },1000)
        },

        // 重新发送短信
        sendMessage(){
            let _this = this
            if(this.countDown<=1){
                console.log('点击了重新发送短信')
                // console.log('点击重新发送了短信')
                this.nextStep()
                this.$set(this,'countDown',60)
                this.$options.methods.countDown(_this)
            }else{
                // console.log('倒计时未结束')
            }
        }

    },

    onLoad(){
        this.$set(this,'page',1)
    }
}
</script>



<style lang="less">

    .mark{
        text-align: center;
        font-family: '思源黑体';
        img{
            margin-top: 125rpx;
            width: 182rpx;
            height: 112rpx;
            margin-bottom: 180rpx;
        }
  
        .userInfo{
            width: 620rpx;
            border-top: 1rpx solid #bfbfbf;
            margin: 0 auto;
            padding-top: 55rpx;
            p:first-child{
                font-size: 32rpx;
                color:#070707;
                margin-bottom: 24rpx;
            }
            p:nth-child(2){
                font-size: 28rpx;
                color: #686868;
                margin-bottom: 86rpx;
            }
            button{
                width: 620rpx;
                height: 92rpx;
                border-radius: 10rpx;
            }
        }
    }

    .mesChange{
        text-align: center;
        font-family: '思源黑体';
        img{
            margin-top: 125rpx;
            width: 182rpx;
            height: 112rpx;
            margin-bottom: 100rpx;
        }
        >span{
            display: block;
            text-align: center;
            height: 40rpx;
            margin-bottom: 40rpx;
            font-size:30rpx;
            color:#696969;
            letter-spacing:4rpx;
        }
        .userInfo{
            width: 620rpx;
            border-top: 1rpx solid #bfbfbf;
            margin: 0 auto;
            padding-top: 55rpx;
            button{
                width: 620rpx;
                height: 92rpx;
                border-radius: 10rpx;
            }
        }
    }


    .login{
        font-family: '思源黑体';
        text-align: center;
        img{
            margin-top: 90rpx;
            margin-bottom: 25rpx;
            width: 124rpx;
            height: 126rpx;
        }
        h1{
            margin-bottom: 105rpx;
            font-size: 30rpx;
            color:#070707;
            font-weight: normal;
        }
        input{
            display: inline-block;
            width: 620rpx;
            height: 88rpx;
            font-size: 30rpx;
            color:#848484;
            margin-bottom: 60rpx;
            border: 1rpx solid #848484;
            border-radius: 10rpx;
            text-align: left;
            box-sizing: border-box;
            padding: 0 40rpx;
            letter-spacing: 2rpx;
        }
        .telError{
            width: 620rpx;
            height: 88rpx;
            font-size: 32rpx;
            background: #7e7e7e;
            color: #fffefe;
        }
        .telOk{
            width: 620rpx;
            height: 88rpx;
            font-size: 32rpx;
            background: #e94a69;
            color: #fffefe;
        }
    }

    .verification{
        text-align: center;
        font-family: '思源黑体';
        h1{
            margin-top: 105rpx;
            line-height: 48rpx;
            font-size: 48rpx;
            color: #070707;
            margin-bottom: 128rpx;
        }
        p{
            display:inline-block;
            width: 620rpx;
            text-align: justify;
            margin-bottom: 65rpx;
            overflow: hidden;
            span:first-child{
                font-size: 24rpx;
                color: #070707;
                float: left;
            }
            span:last-child{
                font-size: 26rpx;
                color: #070707;
                float: right;
            }
        }
        input{
            display: inline-block;
            width: 620rpx;
            height: 88rpx;
            font-size: 30rpx;
            color:#848484;
            margin-bottom: 60rpx;
            border: 1rpx solid #848484;
            border-radius: 10rpx;
            text-align: left;
            box-sizing: border-box;
            padding: 0 40rpx;
            letter-spacing: 2rpx;
        }
        .verOk{
            width: 620rpx;
            height: 88rpx;
            font-size: 32rpx;
            background: #e94a69;
            color: #fffefe;
            letter-spacing: 2rpx;
        }
        .verError{
            width: 620rpx;
            height: 88rpx;
            font-size: 32rpx;
            background: #7e7e7e;
            color: #fffefe;
            letter-spacing: 2rpx;
        }
    }
</style>
